Programmatic UI তৈরি (UILabel, UIButton, UIImageView)

UIKit ব্যবহার করে প্রোগ্রাম্যাটিকভাবে UI তৈরি করা খুবই কার্যকরী, বিশেষ করে যখন আপনি কাস্টম UI তৈরি করতে চান বা কোডের মাধ্যমে UI উপাদানগুলোর উপর নিয়ন্ত্রণ রাখতে চান। এখানে আমরা UILabel, UIButton, এবং UIImageView প্রোগ্রাম্যাটিকভাবে কীভাবে তৈরি করা যায় তা দেখবো।

Step-by-step গাইড: Programmatic UI তৈরি (UILabel, UIButton, UIImageView)

১. UILabel তৈরি করা

UILabel হলো একটি টেক্সট প্রদর্শনের জন্য ব্যবহৃত UI উপাদান। নিচে UILabel কিভাবে তৈরি এবং কনফিগার করতে হয় তা দেখানো হলো:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // UILabel তৈরি করা
        let label = UILabel()
        label.text = "Hello, Swift!"
        label.textColor = .black
        label.font = UIFont.systemFont(ofSize: 24)
        label.textAlignment = .center
        
        // Auto Layout ব্যবহারের জন্য translatesAutoresizingMaskIntoConstraints false করতে হবে
        label.translatesAutoresizingMaskIntoConstraints = false
        
        // ভিউতে যোগ করা
        view.addSubview(label)
        
        // Auto Layout কনস্ট্রেইন্ট সেট করা
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 50)
        ])
    }
}

ব্যাখ্যা:

• UILabel তৈরি করা এবং কনফিগার করা: আমরা একটি UILabel তৈরি করে টেক্সট, টেক্সট কালার, এবং ফন্ট সেট করেছি।
• Auto Layout সেটআপ: translatesAutoresizingMaskIntoConstraints false করে Auto Layout কনস্ট্রেইন্ট ব্যবহার করেছি যাতে লেবেলটি স্ক্রিনের কেন্দ্রে প্রদর্শিত হয়।

২. UIButton তৈরি করা

UIButton হলো একটি টাচ-ইন্টারেক্টিভ উপাদান। নিচে UIButton তৈরি এবং সেটআপ করার উদাহরণ দেওয়া হলো:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // UIButton তৈরি করা
        let button = UIButton(type: .system)
        button.setTitle("Tap Me", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .systemBlue
        button.layer.cornerRadius = 10
        
        // Auto Layout ব্যবহারের জন্য translatesAutoresizingMaskIntoConstraints false করতে হবে
        button.translatesAutoresizingMaskIntoConstraints = false
        
        // ভিউতে যোগ করা
        view.addSubview(button)
        
        // Auto Layout কনস্ট্রেইন্ট সেট করা
        NSLayoutConstraint.activate([
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 150),
            button.widthAnchor.constraint(equalToConstant: 150),
            button.heightAnchor.constraint(equalToConstant: 50)
        ])
        
        // UIButton এর সাথে টাচ ইভেন্ট সংযুক্ত করা
        button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
    }
    
    @objc func buttonTapped() {
        print("Button was tapped")
    }
}

ব্যাখ্যা:

• UIButton তৈরি এবং কনফিগার করা: আমরা একটি UIButton তৈরি করে টাইটেল, ব্যাকগ্রাউন্ড কালার, এবং কর্নার রেডিয়াস সেট করেছি।
• Target Action সেটআপ: বাটনে ট্যাপ করলে buttonTapped মেথড কল হবে, যা প্রোগ্রাম্যাটিকাল ইন্টারেকশন নিশ্চিত করে।

৩. UIImageView তৈরি করা

UIImageView হলো ইমেজ প্রদর্শনের জন্য ব্যবহৃত UI উপাদান। নিচে UIImageView প্রোগ্রাম্যাটিকভাবে তৈরি এবং কনফিগার করার উদাহরণ:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // UIImageView তৈরি করা
        let imageView = UIImageView()
        imageView.image = UIImage(named: "sampleImage") // অ্যাসেট ক্যাটালগে থাকা ইমেজ নাম
        imageView.contentMode = .scaleAspectFit
        
        // Auto Layout ব্যবহারের জন্য translatesAutoresizingMaskIntoConstraints false করতে হবে
        imageView.translatesAutoresizingMaskIntoConstraints = false
        
        // ভিউতে যোগ করা
        view.addSubview(imageView)
        
        // Auto Layout কনস্ট্রেইন্ট সেট করা
        NSLayoutConstraint.activate([
            imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            imageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 250),
            imageView.widthAnchor.constraint(equalToConstant: 200),
            imageView.heightAnchor.constraint(equalToConstant: 200)
        ])
    }
}

ব্যাখ্যা:

• UIImageView তৈরি এবং কনফিগার করা: আমরা একটি UIImageView তৈরি করে একটি ইমেজ সেট করেছি এবং কন্টেন্ট মোড scaleAspectFit করেছি যাতে ইমেজ ঠিকভাবে স্কেল হয়।
• Auto Layout: আমরা Auto Layout কনস্ট্রেইন্ট ব্যবহার করেছি যাতে ইমেজ ভিউ সঠিক অবস্থানে প্রদর্শিত হয়।

৪. সব উপাদান একসাথে ব্যবহার করা

আমরা একসাথে UILabel, UIButton, এবং UIImageView ব্যবহার করে একটি সম্পূর্ণ UI তৈরি করতে পারি:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // UILabel তৈরি করা
        let label = UILabel()
        label.text = "Welcome to Swift!"
        label.textColor = .black
        label.font = UIFont.systemFont(ofSize: 24)
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(label)

        // UIButton তৈরি করা
        let button = UIButton(type: .system)
        button.setTitle("Tap Me", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .systemBlue
        button.layer.cornerRadius = 10
        button.translatesAutoresizingMaskIntoConstraints = false
        button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
        view.addSubview(button)

        // UIImageView তৈরি করা
        let imageView = UIImageView()
        imageView.image = UIImage(named: "sampleImage")
        imageView.contentMode = .scaleAspectFit
        imageView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(imageView)

        // Auto Layout কনস্ট্রেইন্ট সেট করা
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 50),
            
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 50),
            button.widthAnchor.constraint(equalToConstant: 150),
            button.heightAnchor.constraint(equalToConstant: 50),
            
            imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            imageView.topAnchor.constraint(equalTo: button.bottomAnchor, constant: 50),
            imageView.widthAnchor.constraint(equalToConstant: 200),
            imageView.heightAnchor.constraint(equalToConstant: 200)
        ])
    }
    
    @objc func buttonTapped() {
        print("Button was tapped")
    }
}

উপসংহার

UIKit ব্যবহার করে প্রোগ্রাম্যাটিকভাবে UI তৈরি করা একটি সহজ এবং শক্তিশালী পদ্ধতি, যা ডাইনামিক এবং কাস্টম ইন্টারফেস তৈরির জন্য উপযুক্ত। Auto Layout এবং প্রোগ্রাম্যাটিক উপাদান তৈরি করার মাধ্যমে আমরা আমাদের অ্যাপ্লিকেশনকে আরও ফ্লেক্সিবল এবং পুনঃব্যবহারযোগ্য করতে পারি।